<template>
  <view class="total" v-if="Object.keys(info).length > 0">
    <view class="current">当前酒店</view>
    <view class="currentInfo" @click="onClick(info)">
      <view class="hotelName">{{ info.HotelName }}</view>
      <view class="className">酒店：{{ info.HotelId }}</view>
    </view>

    <view class="current">其他酒店</view>
    <view
      class="currentInfo"
      :key="item.Id"
      v-for="item in otherHotels"
      @click="onClick(item)"
    >
      <view class="hotelName">{{ item.HotelName }}</view>
      <view class="className">酒店：{{ item.HotelId }}</view>
    </view>

    <view
      class="bind flex-center"
      @click="route.$route_to(loginPage_register + '?add=true')"
    >
      绑定新酒店
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getSessionCode, set_access_token } from '@/storage/global'
import { INF_LoginToHotel_params, LoginToHotel } from '@/api/group/login'
import { INF_Login_res } from '@/api/server/v2/login'
import route from '@/utils/route'
import { getUserInfo, INF_UserInfo, setUserInfo } from '@/storage/login'
import {
  BindedHotels,
  INF_BindedHotelInfo,
  INF_BindedHotels_res
} from '@/api/group/user'
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'
import { loginPage_register } from '@/route'

let info = ref(getUserInfo()) // 当前酒店
const otherHotels = ref<INF_BindedHotels_res>([]) // 其他所有酒店

const onClick = function (item: INF_BindedHotelInfo | INF_UserInfo) {
  const HotelId: string = item.HotelId
  const SessionCode: string = getSessionCode()
  const params: INF_LoginToHotel_params = {
    HotelId,
    SessionCode
  }
  const UserInfo: INF_UserInfo = {
    UserName: item.UserName,
    HotelId: item.HotelId,
    HotelName: item.HotelName
  }
  setUserInfo(UserInfo)
  LoginToHotel(params).then((res) => {
    const result = res as INF_Login_res
    const access_token: string = result.access_token
    set_access_token(access_token)
    setTimeout(() => {
      route.$routeTo_tabbar('/pages/room_status/index')
    })
  })
}

onShow(() => {
  BindedHotels({ sessioncode: getSessionCode() }).then((res) => {
    let result = res as INF_BindedHotels_res
    if (result.length === 0) {
      route.$route_redirect(loginPage_register)
      return
    }
    otherHotels.value = result
    const res_has_info: boolean =
      result.filter(
        (item) =>
          item.HotelId === info.value.HotelId &&
          item.UserName === info.value.UserName
      ).length > 0
    const shouldResetInfo: boolean = !info.value || !res_has_info
    if (shouldResetInfo) {
      console.log(info.value, 'info 无')
      info.value = result[0]
      otherHotels.value.splice(0, 1)
      setUserInfo(info.value)
    } else {
      // 	不需要重设说明有值并能匹配到服务端数据
      // 	就需要剔除其他酒店里匹配到的那项，避免重复(是直接赋值全部的)
      for (let i = 0; i < result.length; i++) {
        const item: INF_BindedHotelInfo = result[i]
        if (
          item.HotelId === info.value.HotelId &&
          item.UserName === info.value.UserName
        ) {
          otherHotels.value.splice(i, 1)
        }
      }
    }
  })

  onUnload(() => {
    uni.showTabBar({
      fail: () => {
        // 捕获报错，防止没有tabbar页面调用后控制台报错
      }
    })
  })
})
</script>

<style lang="scss" scoped>
.total {
  background-color: #f2f3f6;
  font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
  padding: 0 24rpx;
  box-sizing: border-box;
}
.current {
  padding: 42rpx 0 20rpx 8rpx;
  font-size: 28rpx;
  color: #72767a;
}
.currentInfo {
  width: 702rpx;
  height: 138rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  .hotelName {
    font-size: 28rpx;
    padding: 32rpx 0 10rpx 32rpx;
  }
  .className {
    font-size: 24rpx;
    color: #94999c;
    padding-left: 32rpx;
  }
}
.bind {
  margin-top: 24rpx;
  height: 108rpx;
  background: #ffffff;
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-size: 32rpx;
  color: #2891fa;
}
</style>
